<!-- views/student/TravelQuery.vue -->
<template>
  <div class="travel-query">
    <h2 class="page-title">假期去向查询</h2>

    <el-table :data="holidays" border class="holiday-table">
      <el-table-column prop="name" label="假期名称" width="180" />

      <el-table-column label="放假时间" width="220">
        <template #default="{ row }">
          {{ $formatDate(new Date(row.startDate), 'yyyy-MM-dd') }} 至
          {{ $formatDate(new Date(row.endDate), 'yyyy-MM-dd') }}
        </template>
      </el-table-column>

      <el-table-column label="登记时间" width="280">
        <template #default="{ row }">
          {{ $formatDate(new Date(row.registerStart), 'yyyy-MM-dd HH:mm') }} 至
          {{ $formatDate(new Date(row.registerEnd), 'yyyy-MM-dd HH:mm') }}
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          <el-tag v-if="row.status === 0" type="info">待发布</el-tag>
          <el-tag v-else-if="row.status === 1" type="warning">进行中</el-tag>
          <el-tag v-else type="success">已完成</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button
              size="small"
              type="primary"
              @click="goToRecord(row)"
              :disabled="row.status !== 1"
          >
            登记去向
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="holidays.length === 0" class="no-data">
      <el-empty description="暂无可登记的假期" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      holidays: []
    };
  },
  async mounted() {
    await this.loadHolidays();
  },
  methods: {
    /**
     * 加载可登记的假期
     */
    async loadHolidays() {
      try {
        this.holidays = await $studentAPI.getHolidays();
      } catch (err) {
        console.error('加载假期失败', err);
        this.$message.error('加载假期列表失败');
      }
    },

    /**
     * 前往登记页面
     *
     * @param holiday - 假期对象
     */
    goToRecord(holiday) {
      this.$router.push({
        path: '/student/record-form',
        query: {
          holidayId: holiday.id,
          holidayName: holiday.name
        }
      });
    }
  }
};
</script>
